<template>
  <!--部门管理：-->
  <el-row :gutter="20">
    <el-col :span="14">
      部门管理：<br><br>
      <org-manage
        :expand-on-click-node="false"
      ></org-manage>
    </el-col>
    <el-col :span="5">
      树状结构：<br><br>
      <el-input
        v-model="json1"
        type="textarea"
        :autosize="{ minRows: 30, maxRows: 30 }"
        placeholder=""
      ></el-input>
    </el-col>
    <el-col :span="5">
      后端结构：<br><br>
      <el-input
        v-model="json2"
        type="textarea"
        :autosize="{ minRows: 30, maxRows: 30 }"
        placeholder=""
      ></el-input>
    </el-col>
  </el-row>
  <hr>
  显示 
  <el-select v-model="currOrg">
    <el-option
      v-for="item in state.orgList"
      :key="item.id"
      :label="item.deptName"
      :value="item.id"
    >
      <span
        :style="'margin-left: '+ (item.level + 1) * 10 +'px'"
      >{{ item.deptName }}</span>
    </el-option>
  </el-select> 的所有下级部门：<br>
  <nf-grid-slot
    v-bind="gridMeta"
    :dataList="tableOrg"
    size="small"
  >
    <template #deptName="scope">
      <!--
      <span style="margin-left: 10px">
        {{ ''.padStart(scope.row.level + 1, '　') }}{{ scope.row.deptName }}
      </span><br>-->
      <span :style="'margin-left: '+ (scope.row.level + 1) * 10 +'px'">
        {{ scope.row.deptName }}
      </span>
    </template>
  </nf-grid-slot>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, watch, computed } from 'vue'
  // 模块的操作按钮
  import { orgManage, regOrganizationState } from '../../../lib-organization/main'
  import _gridMeta from './grid.json'
  import { nfGridSlot } from '@naturefw/ui-elp'
  // 加载模块

  // 预设的部门信息
  const list = [
    {
      id: 1,
      deptName: "总部门",
      parentId: 0, // 上级部门ID
      level: 0, // 层级
      path: '0,', // 父ID集合，“,”号分割
      sort: 1, // 同一个父级里的先后顺序
      sortAll: 1, // 部门全排列
    },
    {
      id: 2,
      deptName: "支持部门",
      parentId: 1, // 上级部门ID
      level: 1, // 层级
      path: '0,1,', // 父ID集合，“,”号分割
      sort: 1, // 同一个父级里的先后顺序
      sortAll: 2, // 部门全排列
    },
    {
      id: 3,
      deptName: "研发部门",
      parentId: 1, // 上级部门ID
      level: 1, // 层级
      path: '0,1,', // 父ID集合，“,”号分割
      sort: 2, // 同一个父级里的先后顺序
      sortAll: 4, // 部门全排列
    },
    {
      id: 4,
      deptName: "人事部门",
      parentId: 2, // 上级部门ID
      level: 2, // 层级
      path: '0,1,2,', // 父ID集合，“,”号分割
      sort: 1, // 同一个父级里的先后顺序
      sortAll: 3, // 部门全排列
    },
    {
      id: 5,
      deptName: "测试部门",
      parentId: 3, // 上级部门ID
      level: 2, // 层级
      path: '0,1,3,', // 父ID集合，“,”号分割
      sort: 1, // 同一个父级里的先后顺序
      sortAll: 5, // 部门全排列
    },
    {
      id: 7,
      deptName: "人事部二",
      parentId: 4, // 上级部门ID
      level: 3, // 层级
      path: '0,1,2,4,', // 父ID集合，“,”号分割
      sort: 1, // 同一个父级里的先后顺序
      sortAll: 3, // 部门全排列
    },
    {
      id: 6,
      deptName: "人事部一",
      parentId: 4, // 上级部门ID
      level: 3, // 层级
      path: '0,1,2,4,', // 父ID集合，“,”号分割
      sort: 2, // 同一个父级里的先后顺序
      sortAll: 3, // 部门全排列
    }
  ]
  
  /**
   * 部门的维护
   */
  export default defineComponent({
    name: 'nf-org-page',
    components: {
      orgManage,
      nfGridSlot
    },
    props: {
    },
    setup(props, context) {
      const gridMeta = reactive(_gridMeta)

      const state = regOrganizationState()
      
      const json1 = computed(() => JSON.stringify(state.orgTree, null ,2))
      const json2 = computed(() => JSON.stringify(state.orgList, null ,2))
      
      /*
      state.orgTree = [
        {
          id: 1,
          deptName: "总部门",
          parentId: 0, // 上级部门ID
          level: 1, // 层级
          path: '0,', // 父ID集合，“,”号分割
          sort: 1, // 同一个父级里的先后顺序
          sortAll: 1, // 部门全排列
          children: [] // 子部门
        }
      ]
      */

      // 设备部门
      state.orgList.push(...list)

      // 选择的部门
      const currOrg = ref(0)
      setTimeout(() => {
        state.treeToList()
      }, 200)
     
      const tableOrg = reactive([])
      tableOrg.push(...list)

      watch(state.orgList, () => {
        tableOrg.length = 0
        tableOrg.push(...state.orgList)
      })

      watch(() => currOrg.value, (id) => {
        const org = state.orgObject[id]
        const arr = state.orgList.filter((item) => item.path.indexOf(org.path + org.id + ',') === 0 )
        tableOrg.length = 0
        tableOrg.push(...arr)
      })

      return {
        currOrg,
        tableOrg,
        state,
        gridMeta,
        json1,
        json2
      }
    }
  })
</script>
